<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="flex-col h-100">
            <view class="flex-grow-0 flex-row tab-bar">
                <view @tap="tabSwitch" class="flex-grow-1" data-index="0" style="text-align: center">
                    <view :class="['tab-name', data.swiper_current==0?'active':'']">商品</view>
                </view>
                <view @tap="tabSwitch" class="flex-grow-1" data-index="1" style="text-align: center">
                    <view :class="['tab-name', data.swiper_current==1?'active':'']">专题</view>
                </view>
            </view>
            <view class="flex-grow-1 wh-100" style="position: absolute;top: 0;left: 0;z-index:0;padding-top: 100upx">
                <swiper @change="swiperChange" class="h-100" :current="data.swiper_current" duration="300">
                    <swiper-item>
                        <scroll-view @scrolltolower="goodsScrollBottom" class="h-100" lowerThreshold="1" scrollY="true">
                            <view class="goods-list">
                                <navigator class="goods-item" openType="navigate" :url="'/pages/goods/goods?id='+item.goods_id" v-for="(item,index) in data.goods.list" :key="item.id">
                                    <image class="goods-pic" mode="aspectFill" :src="item.goods_pic"></image>
                                    <view class="goods-info">
                                        <text class="goods-name">{{item.name}}</text>
                                        <text class="goods-price">
                                            <block v-if="!item.is_negotiable">￥</block>{{item.price}}</text>
                                    </view>
                                </navigator>
                            </view>
                            <view class="no-content" v-if="data.goods.list.length==0">
                                暂无收藏的商品
                            </view>
                            <view :class="['loading-more', data.topic.is_loading?'active':'']">
                                <image :src="data.__wxapp_img.system.loading.url"></image>
                            </view>
                        </scroll-view>
                    </swiper-item>
                    <swiper-item>
                        <scroll-view @scrolltolower="topicScrollBottom" class="h-100" lowerThreshold="1" scrollY="true">
                            <view class="list">
                                <block v-for="(item,index) in data.topic.list" :key="item.id">
                                    <navigator class="item layout-0" :url="'/pages/topic/topic?id='+item.id" v-if="item.layout==0">
                                        <view class="flex-row">
                                            <view class="flex-grow-1 flex-col">
                                                <view class="flex-grow-1">
                                                    <view class="title">{{item.title}}</view>
                                                </view>
                                                <view class="flex-grow-0 read-count">{{item.read_count}}</view>
                                            </view>
                                            <view class="flex-grow-0" style="position: relative">
                                                <image class="cover-pic" mode="aspectFill" :src="item.cover_pic"></image>
                                                <view class="goods-count" v-if="item.goods_count">{{item.goods_count}}
                                                </view>
                                            </view>
                                        </view>
                                    </navigator>
                                    <navigator class="item layout-1" :url="'/pages/topic/topic?id='+item.id" v-if="item.layout==1">
                                        <view class="title" style="font-weight: 600;font-size: 12pt">{{item.title}}</view>
                                        <image class="cover-pic" mode="aspectFill" :src="item.cover_pic"></image>
                                        <view class="flex-row">
                                            <view class="flex-grow-1 read-count">{{item.read_count}}</view>
                                            <view class="flex-grow-0 goods-count" v-if="item.goods_count">
                                                {{item.goods_count}}
                                            </view>
                                        </view>
                                    </navigator>
                                </block>
                            </view>
                            <view class="no-content" v-if="data.topic.list.length==0">
                                暂无收藏的专题
                            </view>
                            <view :class="['loading-more', data.topic.is_loading?'active':'']">
                                <image :src="data.__wxapp_img.system.loading.url"></image>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        swiper_current: 0,
        goods: {
            list: [],
            is_more: !0,
            is_loading: !1,
            page: 1
        },
        topic: {
            list: [],
            is_more: !0,
            is_loading: !1,
            page: 1
        }
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), this.loadGoodsList({
            reload: !0,
            page: 1
        }), this.loadTopicList({
            reload: !0,
            page: 1
        });
    },
		onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this), this.loadMoreGoodsList();
    },
		methods: {
			tabSwitch: function(t) {
        var a = this, o = t.currentTarget.dataset.index;
        a.setData({
            swiper_current: o
        });
    },
    swiperChange: function(t) {
        this.setData({
            swiper_current: t.detail.current
        });
    },
    loadGoodsList: function(t) {
        var a = this;
        a.data.goods.is_loading || t.loadmore && !a.data.goods.is_more || (a.data.goods.is_loading = !0, 
        a.setData({
            goods: a.data.goods
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.favorite_list,
            data: {
                page: t.page
            },
            success: function(o) {
                0 == o.code && (t.reload && (a.data.goods.list = o.data.list), t.loadmore && (a.data.goods.list = a.data.goods.list.concat(o.data.list)), 
                a.data.goods.page = t.page, a.data.goods.is_more = o.data.list.length > 0, a.setData({
                    goods: a.data.goods
                }));
            },
            complete: function() {
                a.data.goods.is_loading = !1, a.setData({
                    goods: a.data.goods
                });
            }
        }));
    },
    goodsScrollBottom: function() {
        var t = this;
        t.loadGoodsList({
            loadmore: !0,
            page: t.data.goods.page + 1
        });
    },
    loadTopicList: function(t) {
        var a = this;
        a.data.topic.is_loading || t.loadmore && !a.data.topic.is_more || (a.data.topic.is_loading = !0, 
        a.setData({
            topic: a.data.topic
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.topic_favorite_list,
            data: {
                page: t.page
            },
            success: function(o) {
                0 == o.code && (t.reload && (a.data.topic.list = o.data.list), t.loadmore && (a.data.topic.list = a.data.topic.list.concat(o.data.list)), 
                a.data.topic.page = t.page, a.data.topic.is_more = o.data.list.length > 0, a.setData({
                    topic: a.data.topic
                }));
            },
            complete: function() {
                a.data.topic.is_loading = !1, a.setData({
                    topic: a.data.topic
                });
            }
        }));
    },
    topicScrollBottom: function() {
        var t = this;
        t.loadTopicList({
            loadmore: !0,
            page: t.data.topic.page + 1
        });
    },
		},
	}
</script>

<style scoped>
.goods-list {
    padding-top: 5upx;
}

.goods-item {
    width: 365upx;
    display: inline-block;
    position: relative;
    margin: 0 5upx;
    margin-bottom: 10upx;
    font-size: 0;
    background: #fff;
}

.goods-item .goods-pic {
    width: 100%;
    height: 365upx;
}

.goods-item .goods-info {
    padding: 5upx 0;
}

.goods-item .goods-name {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 10upx;
    font-size: 11pt;
    display: block;
    text-align: center;
}

.goods-item .goods-price {
    font-size: 11pt;
    color: #f40;
    display: block;
    text-align: center;
}

.loading-bar {
    visibility: hidden;
}

.loading-bar.active {
    visibility: visible;
}

.tab-bar {
    background: #fff;
    border-top: 1upx solid #e3e3e3;
    border-bottom: 1upx solid #e3e3e3;
    position: fixed;
    top: var(--window-top);
    left: 0;
    width: 100%;
    z-index: 10;
    height: 100upx;
}

.tab-bar .tab-name {
    display: inline-block;
    padding: 24upx 32upx;
    border-bottom: 2upx solid transparent;
    height: 98upx;
}

.tab-bar .tab-name.active {
    border-color: #ff4544;
    color: #ff4544;
}

.list .item {
    display: block;
    background: #fff;
    padding: 34upx 24upx;
    margin-bottom: 10upx;
}

.list .item .title {
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list .item .cover-pic {
    width: 268upx;
    height: 202upx;
    margin-left: 10upx;
    display: block;
}

.list .item .goods-count,.list .item .read-count {
    font-size: 9pt;
    color: #888;
}

.list .item.layout-1 .title {
    margin-bottom: 24upx;
    -webkit-line-clamp: 2;
}

.list .item.layout-1 .cover-pic {
    width: 702upx;
    height: 350upx;
    margin-left: 0;
    margin-bottom: 24upx;
}

.list .item.layout-0 .goods-count {
    position: absolute;
    bottom: 20upx;
    right: 0upx;
    display: inline-block;
    background: rgba(0,0,0,.5);
    color: rgba(255,255,255,0.8);
    padding: 5upx 10upx;
}

.no-content {
    color: #888;
    padding: 100upx 0 0 0;
    text-align: center;
}

.loading-more {
    text-align: center;
    opacity: 0;
}

.loading-more.active {
    opacity: 1;
}

.loading-more image {
    width: 160upx;
    height: 80upx;
}
</style>
